<template>
	<!-- <h1>登录</h1> -->
	<!-- 设置占满整个屏幕 -->
	<el-row style="min-height: 100vh;" class="login_page">
		<el-col :span="16" class="login-left">
			<div class="text-left font-bold">
				<div>欢迎来到接口平台</div>
				<div>用数据还原世界本质，用交互驱动场景价值</div>
			</div>
		</el-col>
		<el-col :span="8" class="login-right">
			<h2>欢迎登录</h2>
			<div>
				<span></span>
				<span>账号密码</span>
				<span></span>
			</div>
			<el-form ref="formRef" :rules="rules" :model="form" label-width="auto" style="max-width: 700px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="form.username" placeholder="请输入用户名" type="text">
						<template #prefix>
							<el-icon class="el-input__icon">
								<User />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" placeholder="请输入密码" show-password type="password">
						<template #prefix>
							<el-icon class="el-input__icon">
								<Lock />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button class="w-[250px]" type="primary" @click="onSubmit_login" round
						:loading="loading">登录</el-button>
				</el-form-item>
				<el-form-item>
					<el-button class="w-[250px]" type="primary" @click="onSubmit_register" round>注册</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
</template>

<script setup lang="ts" name="Login">
import { reactive, ref, onMounted, onBeforeMount } from 'vue'
import { toast } from '@/composables/util'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
const loading = ref(false)

// do not use same name with ref
const form = reactive({
	username: '',
	password: '',
})

// 用户名和密码校验
const rules = {
	username: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 3, max: 20, message: '用户名长度必须为3-5个字符', trigger: 'blur' },
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 3, max: 20, message: '密码长度必须为6-8个字符', trigger: 'blur' },
	]
}
const formRef = ref()
// 登录
const onSubmit_login = () => {
	formRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		loading.value = true
		// 下面是专门调用actions的
		console.log('form的内容为：', form);

		store.dispatch("login", form).then(res => {
			toast("登录成功", `欢迎${form.username}`, "success")
			router.push('/')
		}).finally(() => {
			loading.value = false
		})
	})
}
// 注册
const onSubmit_register = () => {
	router.push('/register')
}
// 监听回车事件方法
function onkeyup(e) {
	if (e.key == 'Enter') {
		onSubmit_login()
	}
	console.log(e);
}
// 添加键盘监听
onMounted(() => {
	document.addEventListener('keydown', onkeyup)
})
onBeforeMount(() => {
	// 移除键盘监听
	document.removeEventListener('keydown', onkeyup)
})

</script>

<style scoped>
.login_page {
	@apply bg-blue-500;
}

.login_page .login-left {
	/* 垂直水平方向居中 */
	@apply flex items-center justify-center;
}

.login-right {
	@apply bg-light-50;
	@apply flex items-center justify-center flex-col;
}

.login-left>div>div:first-child {
	@apply font-bold text-6xl text-light-10 mb-4
}

.login-left>div>div:nth-child(2) {
	@apply text-gray-200 text-xl
}

.login-right>h2 {
	@apply font-bold text-4xl text-gray-700
}

.login-right>div {
	@apply flex items-center justify-center my-5 text-gray-300 space-x-2
}

.login-right>div>span:first-child, .login-right>div>span:nth-child(3) {
	@apply h-[1px] w-16 bg-gray-200
}

::v-deep(.el-form-item__label) {
	font-size: 16px;
}
</style>
